S03-01 JS-基础-基础语法

[TOC]

概述

前端三大核心

前端开发最主要需要掌握的是三个知识点：HTML、CSS、JavaScript

计算机语言

~~计算机语言（Computer Language）~~：指用于人与计算机之间通讯的语言，是人与计算机之间传递信息的介质。其概念比通用的编程语言要更广泛。例如，HTML是标记语言，也是计算机语言，但并不是编程语言。

前面我们已经学习了HTML和CSS很多相关的知识:

HTML：是一种标记语言
CSS：是一种样式语言;

他们本身都是属于计算机语言, 因为都在和计算机沟通交流；

在生活中两个人想要沟通, 必然是通过某一种语言(中文/英语/粤语/东北话)
计算机语言就是我们人和计算机进行交流要学习的语言;

网页的三大组成部分的另外一个核心就是JavaScript：JavaScript必然也是一种计算机语言;

编程语言

概述

~~编程语言（Programming Language）~~：用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下应当采取的行动。

事实上, JavaScript我们可以对其有更加精准的说法：一种编程语言。

~~编程语言的特点~~：

数据和数据结构
指令及流程控制
引用机制和重用机制
设计哲学

这样的区分是否有意义呢？我们这里不讨论，我这里只把最专业的定义来告诉大家。

~~常见编程语言~~

编程语言历史

~~阶段一: 机器语言~~：

计算机的存储单元只有0和1两种状态，因此一串代码要让计算机“读懂”，这串代码只能由数字0和1组成。
像这种由数字0和1按照一定的规律组成的代码就叫机器码，也叫二进制编码。
一定长度的机器码组成了机器指令，用这些机器指令所编写的程序就称为机器语言。

优点:

无需编译解析：代码能被计算机直接识别，不需要经过编译解析；
执行效率高：直接对硬件产生作用，程序的执行效率非常高；

缺点:

可读性差：程序全是些0和1的指令代码，可读性差，还容易出错；
不易编写：目前没有人这样开发；

~~阶段二: 汇编语言~~：

为了解决机器语言的缺陷，人们发明了另外一种语言——汇编语言。
这种语言用符号来代替冗长的、难以记忆的0、1代码。(mov/push指令，经过汇编器，汇编代码再进一步转成0101)

优点:

像机器语言一样，可以直接访问、控制计算机的各种硬件设备；
占用内存少，执行速度快；

缺点:

不兼容：不同的机器有不同的汇编语言语法和编译器，代码缺乏可移植性。一个程序只能在一种机器上运行，换到其他机器上可能就不能运行；
不易编写/调试：符号非常多、难记。即使是完成简单的功能也需要大量的汇编语言代码，很容易产生BUG，难于调试；

应用场景：操作系统内核、驱动程序、单片机程序；

~~阶段三: 高级语言~~：

最好的编程语言应该是什么? 自然语言；
而高级语言, 就是接近自然语言, 更符合人类的思维方式
跟和人交流的方式很相似, 但是大多数编程语言都是国外发明的, 因为都是接近于英文的交流方式

优点:

易于理解：简单、易用、易于理解，语法和结构类似于普通英文；
易于编写：远离对硬件的直接操作，使得一般人经过学习之后都可以编程，而不用熟悉硬件知识；
兼容性好：一个程序还可以在不同的机器上运行，具有可移植性；

缺点:

需要编译：程序不能直接被计算机识别，需要经编译器翻译成二进制指令后，才能运行到计算机上；
种类繁多：JavaScript 、 C语言、C++、C#、Java、Objective-C 、Python等；

机器语言和高级语言

在前端，我们需要学好的只有一门高级语言：JavaScript。

JavaScript

概述

~~JavaScript（JS）~~：是一种高级的、解释型的编程语言。它是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程。

从上面的定义中, 我们会发现很多关键词：

解释型语言? 原型? 头等函数? 多范式? 面向对象程序设计? 指令式编程? 函数式编程?
这些改变往往会让人不知所云，需要我们完全掌握JavaScript再来回头看，每一个词语描述的都非常准确；

现在只需要知道，通俗的说法:

JavaScript是一门高级编程语言, 是前端开发的重要组成部分!

HTML和CSS也是前端开发的重要组成部分, 而JavaScript是前端开发的灵魂;

JS历史

~~Javascript诞生~~：1994年Netscape公司出于实现与访问者互动的目的创造了Javascript。

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。

这是历史上第一个比较成熟的网络浏览器，轰动一时。
但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。
网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。

网景公司当时想要选择一种语言来嵌入到浏览器中：

采用现有的语言，比如Perl、Python、Tcl、Scheme等等, 允许它们直接嵌入网页;
1995年网景公司招募了程序员Brendan Eich，希望将Scheme语言作为网页脚本语言的可能性；

就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出；

Java推出之后立马在市场上引起了轰动，Java当初有一个口号：“write once run anywhere”；
网景公司动了心，决定与Sun公司结成联盟，希望将Java嵌入到网页中来运行；
Brendan Eich本人非常热衷于Scheme，但是管理层那个时候有点倾向于Java，希望可以简化Java来适应网页脚本的需求；

但是Brendan Eich对此并不感兴趣，他用10天时间设计出来了JavaScript；

最初这门语言的名字是Mocha（摩卡）；
在Navigator2.0 beta版本更名为LiveScript；
在Navigator2.0 beta 3版本正式重命名为JavaScript，当时是为了给这门语言搭上Java这个热词；

当然10天设计出来语言足够说明Brendan Eich是天才，但是这门语言当时更像是一个多种语言的大杂烩;

借鉴C语言的基本语法；
借鉴Java语言的数据类型和内存管理；
借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
借鉴Self语言，使用基于原型（prototype）的继承机制。

Brendan Eich曾经这样描述过JavaScript：

与其说我爱Javascript，不如说我恨它，它是C语言和Self语言一夜情的产物；
十八世纪英国文学家约翰逊博士说得好：'它的优秀之处并非原创，它的原创之处并不优秀。’
（the part that is good is not original, and the part that is original is not good.）

~~微软的竞品JScript~~：

微软公司于1995年首次推出Internet Explorer，从而引发了与Netscape的浏览器大战。

微软对Netscape Navigator解释器进行了逆向工程，创建了JScript，以与处于市场领导地位的网景产品同台竞争；
这个时候对于开发者来说是一场噩耗，因为需要针对不同的浏览器进行不同的适配；

~~ECMAScript标准规范ECMA-262~~：

1996年11月，网景正式向ECMA（欧洲计算机制造商协会）提交语言标准。

1997年6月，ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262;
ECMA-262是一份标准，定义了ECMAScript;
JavaScript成为了ECMAScript最著名的实现之一;
除此之外，ActionScript和JScript也都是ECMAScript规范的实现语言；

ECMAScript是一种规范，而JavaScript是这种规范的一种实现。

JS组成

ECMAScript是JavaScript的标准，描述了该语言的语法和基本对象。

JavaScript是ECMAScript的语言层面的实现;
因为除了语言规范之外，JavaScript还需要对页面和浏览器进行各种操作;
除了基本实现之外，还包括DOM操作和BOM操作;

目前我们会针对性的学习ECMAScript，也就是语言层面的内容，特别是ES5之前的语法。

JS应用

基础

编写方式

~~编写方式~~：

位置一：HTML代码行内（不推荐）

位置二：Script标签中

位置三：外部的Script文件

需要通过script元素的src属性来引入JavaScript文件

~~注意事项~~：

script元素不能写成单标签
- 在外联式引用js文件时，script标签中不可以写JavaScript代码，
- script标签不能写成单标签，即不能写成：<script src="index.js"/>；
现代浏览器可以省略type属性
- 在以前的代码中，<script>标签中会使用 type="text/javascript"；
- 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言；
加载顺序
- 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序（自上而下）。
- 推荐将JavaScript代码和编写位置放在body子元素的最后一行；
严格区分大小写
- HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写；

后续补充：script元素还有defer、async属性，我们后续再详细讲解。

<noscript>

针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案：<noscript>。

语法：

位置：可放置在 <head> 或 <body> 中。
内容：可包含任何 HTML 元素（如文本、图片、链接等）。

html

<noscript>
  <!-- 替代内容 -->
</noscript>

示例

在 <body> 中（常见用法）

html

<script>
  document.write("JavaScript 已启用！");
</script>
<noscript>
  <p>⚠️ 您的浏览器未启用 JavaScript，部分功能无法使用！</p>
</noscript>

在 <head> 中（特殊用途）：仅用于加载 CSS 等资源

html

<head>
  <noscript>
    <link rel="stylesheet" href="no-js-styles.css">
  </noscript>
</head>

浏览器禁用JS：

路径：浏览器 - 设置 - 隐私与安全 - 网站设置 - JavaScript

交互方式

交换方式：JavaScript有如下和用户交互的手段：最常见的是通过console.log, 目前大家掌握这个即可;

Chrome调试

Console

在前面我们利用Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们来调试JavaScript。

当我们在JavaScript中通过console函数显示一些内容时，也可以使用Chrome浏览器来查看：

注意事项：

显示错误：如果在代码中出现了错误，那么可以在console中显示错误。
命令行：console中有个 > 标志，它表示控制台的命令行。
- 单行命令：在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码。
- 多行命令：如果希望编写多行代码，可以按下shift+enter来进行换行编写。
后续：debug：在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程；

语句和分号

~~语句（Statements）~~：是向浏览器发出的指令，通常表达一个操作或者行为（Action）。

比如我们前面编写的每一行代码都是一个语句，用于告知浏览器一条执行的命令；

~~分号（Semicolon）~~：通常每条语句的后面我们会添加一个分号，表示语句的结束：

自动插入分号（an automatic semicolon，省略分号）：当存在换行符（line break）时，在大多数情况下可以省略分号。JS 将换行符理解成“隐式”的分号；

推荐做法：

前期：在对JavaScript语法不熟悉的情况推荐添加分号；
后期：对JavaScript语法熟练的情况下，任意！

注释

在HTML、CSS中我们都添加过注释，JavaScript也可以添加注释。

JavaScript的注释主要分为三种：

单行注释：// 单行注释。
多行注释：/* 多行注释 */。
文档注释：VSCode中需要在单独的JavaScript文件中编写才有效。

注意：JS不支持注释的嵌套。

VSCode插件

推荐两个VSCode插件：

ES7+ React/Redux/React-Native snippets：这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句；

Bracket Pair Colorizer 2：VSCode已内置，配置方法：

json

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"

变量

概述

~~变量（Variable）~~：用于存储数据的命名容器。程序通过变量名访问和操作内存中的数据。

~~程序中变量的数据~~：

在我们平时开发中，使用最多的并不是固定的数据, 而是会变换的数据：

比如购物车商品的数量、价格的计算等等；
比如一首歌曲播放的时间、进度条、歌词的展示等等；
比如微信聊天中消息条数、时间、语音的长度、头像、名称等等；
比如游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等；

如果我们希望记录某一个之后会变量的数据，在JavaScript中我们可以定义一个变量：

一个变量，就是一个用于存放数值的容器；
这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据；
变量的独特之处在于它存放的数值是可以改变的；

我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。

例如，变量 message 可以被想象成一个标有 “message” 的盒子，盒子里面的值为 “Hello!”；
并且，这个盒子的值，我们想改变多少次，就可以改变多少次；

语法格式

~~语法格式~~：在JavaScript中如何命名一个变量呢？包含两部分：

变量的声明：在JavaScript中声明一个变量使用var关键字（variable单词的缩写）（后续学习ES6还有let、const声明方式）

var message;

变量的赋值：使用 = 给变量进行赋值；

var message = 'hello'

~~核心特性~~：

存储的值可变：同一个变量在不同时刻可存储不同值。

var score = 100;  // 初始值
score = 95;       // 更新值

声明和赋值分开操作：
js
```
var message;
message = 'hello'
```
1
2

同时声明多个变量：

// 写法一：
var name, age, height;
name = 'tom';
age= 18;
height = 1.88;

// 写法二：
var name = 'tom', age = 18, height = 1.88;

// 写法三：（推荐）
var name = 'tom';
var age = 18;
var height = 1.88;

命名规范

~~命名标识符规则~~：必须遵守

字母/下划线开头：包含字母、数字、下划线（如 user_age, _count, totalPrice)。
区分大小写：myVar ≠ myvar。
不可用关键字：避免 if, for, function 等语言保留字。

~~命名标识符规范~~：建议遵守

驼峰写法：多个单词使用驼峰标识；
空格：赋值 = 两边都加上一个空格；
分号：一条语句结束后加上分号; 也有很多人的习惯是不加；
见名知意：变量应该做到见名知意；

练习

练习一：定义一些变量，保存自己的个人信息：

比如姓名、年龄、身高、体重、爱好等等

练习二：定义一个变量name，赋值成coderwhy。定义一个变量admin，将name赋值给admin

练习三：定义变量，保存两个数字，并且对两个变量的数字进行交换

方式一：使用临时变量
方式二：不使用临时变量（了解即可）

练习四：让用户在浏览器中输入一个值，在JavaScript程序中使用变量接收

作业：你平时在使用一些应用程序时，哪些内容可以定义成变量？

比如玩游戏、听歌、购物的应用程序中；

使用注意

注意1：变量未声明
如果一个变量未声明（declaration）就直接使用，那么会报错。
注意2：变量未赋值
如果一个变量有声明，但是没有赋值，那么默认值是undefined。
注意3：不用var声明变量
如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）

数据类型

JS的数据类型

JavaScript 中的值都具有特定的类型：

例如，字符串或数字。
我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型；

动态类型的编程语言（dynamically typed）：允许一个变量可以在前一刻是个字符串，下一刻就存储一个数字的编程语言，如JavaScript。

数据类型分为两大类：

原始类型（Primitive）：存储简单数据值，不可变（immutable），按值传递。
对象类型（Object）：存储复杂数据结构，按引用传递，包含属性和方法。

~~JS中有8种基本数据类型~~：7 种原始类型和 1 种引用类型

Number：任何类型的数字，整数或浮点数。
String：字符串。
Boolean：true 和 false。
Undefined：未定义的值，只有一个 undefined 值的独立类型。
Null：未知的值，只有一个 null 值的独立类型。
Object：更复杂的数据结构。
BigInt：任意长度的整数。
Symbol：唯一的标识符。

Number

~~Number~~：代表整数和浮点数。

常见操作：数字number可以有很多操作，比如，乘法 *、除法 /、加法 +、减法 - 等。

常见运算符：后续专门讲解。

特殊数值(Special Numeric Values)：除了常规的数字，还包括所谓的特殊数值也属于Number类型。

Infinity：代表数学概念中的无穷大 ∞，也可以表示-Infinity。如 1/0 == Infinity。
NaN：代表一个计算错误，它是一个错误的操作所得到的结果；如'tom' * 100 == NaN 。

进制表示：在之前我们学习过进制的概念，数字类型也有其他的进制表示方法：

十进制
十六进制：0x开头
二进制：0b开头
八进制：0o开头

数字表示的范围：

最小正数值：Number.MIN_VALUE，这个值为： 5e-324，小于这个的数字会被转化为0。
最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308。

相关方法：

isNaN()：(num)，用于判断是否不是一个数字。不是数字返回true，是数字返回false。

后续我们会对Number类型进行更加详细的学习；

String

~~String~~：用于表示和操作字符序列。

在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串String：

比如人的姓名：coderwhy。地址：广州市。简介：认真是一种可怕的力量；

字符串字面量：可以使用单引号' 、 双引号" 或 反引号指定。

前后引号类型必须一致：

如果在字符串里面本身包括单引号，可以使用双引号；
如果在字符串里面本身包括双引号，可以使用单引号；

转义字符

转义字符：除了普通的可打印字符以外，一些有特殊功能的字符可以通过转义字符的形式放入字符串中：

转义字符串开发中只有特殊场景才会用到，暂时掌握 \' \" \t \n四个的用法即可。

属性和方法

字符串还有很多细节和操作方法，在后续学习了面向对象后，我们再详细学习；

基本操作：这里我们先掌握几个基本的字符串使用操作：

字符串拼接：通过+运算符（后续还会详细讲解）
获取字符串长度

Boolean

~~Boolean~~：布尔，用于表示真假：

比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；
比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等；

命令来源：布尔（英语：Boolean）是计算机科学中的逻辑数据类型，以发明布尔代数的数学家乔治·布尔为名。

Boolean类型的值：true 和 false。

在后续逻辑运算符中我们还会详细学习和使用Boolean类型；

Undefined

~~Undefined~~：未定义，表示变量已声明但尚未赋值，或对象属性/函数参数不存在。

Undefined类型的值：undefined。

示例：

未赋值的变量
显式赋值 undefined（不推荐）

注意事项：

推荐变量定义时初始化：而不只是声明一个变量。
不要显式为变量赋值undefined：可以赋值0、''、null表示什么变量开始时都没有。

Null

~~Null~~：通常用来表示一个对象为空。

Null类型的值：null。

应用场景：

初始化对象变量：给一个对象进行初始化时赋值为null。

var obj = null; // 稍后会被赋值
obj = { name: 'tom',age: 18 }

typeof 检测
js
```
typeof null // "object"
```
1

对比 undefined：

对比项	`null`	`undefined`
含义	"无对象"的故意空值	"未初始化"的系统默认值
类型	`typeof null → "object"`（历史遗留错误）	`typeof undefined → "undefined"`
赋值方	开发者显式赋值	JavaScript 引擎自动分配
相等判断	`null == undefined` → true	`null === undefined` → false
典型用法	表示有意的空对象引用	表示未定义的初始状态

Object

~~Object~~：引用类型，用于存储键值对集合。几乎所有复杂数据类型（如数组、函数）都是对象的特殊形式。

对象类型包括以下特殊类型：

类型	说明	检测方式
Object	`{}` 或 `new Object()`	`typeof obj === "object"`
Array	`[1, 2, 3]`	`Array.isArray(arr)`
Function	`function() {}`	`typeof func === "function"`
Date	`new Date()`	`obj instanceof Date`
RegExp	`/pattern/`	`obj instanceof RegExp`

对象的字面量语法：

// 对象字面量语法
const person = {
  name: "张三",     // 键(key): "name" → 值(value): "张三"
  age: 30,          // 键值对 = 属性(property)
  isEmployed: true,
  sayHello() {      // 方法(method)
    console.log(`你好，我是${this.name}`);
  }
};

操作数类型	返回值	示例
Number	`"number"`	`typeof 3.14` / `typeof NaN`
String	`"string"`	`typeof "hello"`
Boolean	`"boolean"`	`typeof true`
Undefined	`"undefined"`	`typeof undefined`
Null	`"object"` 🚨	`typeof null` (历史遗留问题)
Object/Array (常规)	`"object"`	`typeof {}` / `typeof []`

BigInt	`"bigint"`	`typeof 10n`
Symbol	`"symbol"`	`typeof Symbol()`

Function	`"function"`	`typeof alert`

运算符

概述

运算符

在小学的时候我们就学习了各种运算符，比如加号 +、乘号 *、减号 - 、除号/

几乎所有的编程语言都有各种各样的运算符(Operators，操作符)

初次接触这些运算符, 你会感觉种类繁多, 难以记忆.
但是并不需要特别担心, 因为很多的运算符我们在以后的开发中, 每天都会使用；
多练习, 不需要刻意去记忆；
而且常见的高级语言运算符都是相似的，学了JavaScript运算符很容易掌握C/C++/OC/Python等语言的运算符；

计算机最基本的操作就是执行运算，执行运算时就需要使用运算符来操作：

比如 console.log(20 + 30); +号就是一个运算符.
比如 console.log(20 * 30); *号也是一个运算符.

~~运算符分类~~：JavaScript按照使用场景的不同将运算符分成了很多种类型：

算术运算符：+、-、*、/、%、**、++、--
赋值运算符：=、+=、-=、*=、/=、%=、**=、??=
比较运算符：==、===、!=、!==、>、<、>=、<=、?
逻辑运算符：&&、||、!、??
位运算符：&、|、^、~、<<、>>、>>>
三元运算符：?:
类型运算符：typeof、instanceof、in、delete
其他运算符：,、void、new、...、()

~~运算符优先级~~：从高到低排列（部分关键优先级）：

优先级	运算符类型	运算符示例
21	分组	`()`
20	成员访问	`.` `[]`
19	new (带参数列表)	`new Date()`
18	函数调用	`fn()`
17	后置递增/减	`++` `--`
16	逻辑非/位非	`!` `~`
15	乘除/取模	`*` `/` `%`
14	加减	`+` `-`
13	位移	`<<` `>>` `>>>`
12	关系	`<` `>` `<=` `>=` `in` `instanceof`
10	相等	`==` `!=` `===` `!==`
6	逻辑与	`&&`
5	逻辑或	`	`
4	三元运算符	`?:`
3	赋值	`=` `+=` `-=` 等
2	yield	`yield`
1	逗号	`,`

运算元

在正式开始运算之前，我们先学习一下常见的术语：

~~运算元（Operand，参数）~~：是指被运算符操作的值或变量（如5 * 2有2个运算元5和2）。

~~运算符~~：对运算元执行操作的符号（如 +, -, *, / 等）。它分为：

一元运算符：一个运算符对应的只有一个运算元（如-3）。
二元运算符：一个运算符拥有两个运算元（如2 + 3）。

~~表达式~~：由运算元和运算符组成的计算单元。

算术运算符

~~算术运算符~~：用于数学计算，返回数字结果（除 + 可能返回字符串）。

运算符	名称	示例	结果	特殊说明
`+`	加法/字符串连接	`5 + 2`	`7`	字符串连接：`"a" + "b" → "ab"`
`-`	减法	`5 - 2`	`3`
`*`	乘法	`5 * 2`	`10`
`/`	除法	`10 / 2`	`5`	`5 / 0 → Infinity`
`%`	取余	`10 % 3`	`1`	求余数
`**`	指数（幂）	`2 ** 3`	`8`	ES2016 新增
`++`	自增	`let x=5; x++`	`x=6`	前增量：`++x` 先增后用
`--`	自减	`let x=5; x--`	`x=4`	后增量：`x--` 先用后减

示例：

"5" - "2"  // 3 (自动转数字)
"5" + 2    // "52" (字符串连接)

取余 %

~~取余（%）~~：返回左侧操作数除以右侧操作数的余数。

示例：

console.log(13 % 5);// 3
console.log(-13 % 5);// -3
console.log(4 % 2);// 0
console.log(-4 % 2);// -0

幂 **

~~幂（**）~~：等价于 Math.pow()，返回第一个操作数取第二个操作数的幂的结果。

示例：

console.log(3 ** 4); // 81
console.log(10 ** -2); // 0.01
console.log(2 ** (3 ** 2)); // 512
console.log((2 ** 3) ** 2); // 64

自增/自减

~~自增（++）/自减（--）~~：一元运算符，用于对变量进行加1或减1操作。

分类：它们有前缀形式和后缀形式，行为有重要区别。

前缀形式：++x/--x，先执行增/减操作，后返回增减后的值。

let x = 5;
let y = ++x; // 1. x 变为 6  2. y 被赋值为 6
console.log(x, y); // 6, 6

后缀形式：x++/x--，先返回当前值，后执行增/减操作。

let a = 5;
let b = a--; // 1. b 被赋值为 5  2. a 变为 4
console.log(a, b); // 4, 5

~~核心特性~~：

自增/自减只能应用于变量：应用于数值（如 5++）会报错。

// x++ 返回的是值而非变量引用，不能再次应用 ++
let x = 5;
x++++; // SyntaxError: Invalid left-hand side expression

赋值运算符

~~赋值运算符~~：用于将值赋给变量。

let x = 123 // 将值 123 写入 x 然后返回 x

分类：

基础赋值运算符：=
算术复合赋值运算符：+=、-=、*=、/=、%=、**=
位运算复合赋值运算符：&=、|=、^=、<<=、>>=、>>>=
逻辑复合赋值运算符：&&=、||=、??=

基础赋值

~~基础赋值~~：将右侧的值赋给左侧的变量，并返回被赋的值（可链式赋值）。

语法：

variable = value;

示例：

// 基本赋值
let x = 10; 

// 链式赋值
let a, b, c;
a = b = c = 5; // 所有变量值为5

// 解构赋值
const [first, second] = [1, 2]; // first=1, second=2
const {name, age} = {name: "Alice", age: 30};

链式赋值

~~链式赋值（Chained Assignment）~~：允许在单个表达式中将同一个值连续赋给多个变量。

语法：

variable1 = variable2 = ... = value;

执行顺序：

let a, b, c;
a = b = c = 10;

// 执行顺序：
// 1. c = 10 → 将10赋值给c
// 2. b = c → 将c的值(10)赋值给b
// 3. a = b → 将b的值(10)赋值给a

核心特性：

从右向左执行：赋值操作从最右侧开始
共享值：所有变量获得相同的值
返回最终值：整个表达式返回最左侧变量的值
变量必须先声明（使用 let/var/const）

注意事项：

变量要先声明

// ❌ 错误：未声明的变量
a = b = 10; // 在严格模式下报错，非严格模式创建全局变量

// ✅ 正确：先声明
let a, b;
a = b = 10;

共享同一个数组/对象引用

const arr1 = arr2 = []; // 共享同一个数组引用

arr1.push(1);
console.log(arr2); // [1] - 两个变量指向同一数组
console.log(arr1 === arr2) // true

更现代的替代方案：解构赋值（更强大）

// 更现代的替代方案
const [x, y, z] = Array(3).fill(0);

// 对象属性
const config = { width: 100, height: 100, depth: 100 };

算术复合赋值

原地修改

~~原地修改 (In-place Modification)~~：是指直接在原始数据结构上进行更改，而不创建新的副本。这种操作方式直接改变内存中的原始数据，而不是返回一个新的修改后的版本。

核心特性：

内存效率：不创建新对象，节省内存
副作用：操作会改变原始数据
性能优势：避免创建副本的开销
引用保留：所有指向该数据的引用都会看到变化

示例：算术复合赋值

我们经常需要对一个变量做运算，并将新的结果存储在同一个变量中。

// 原地修改
var n = 10
n = n + 5
n = n * 2

// 使用 += *= 缩写
n += 5
n *= 2

所有算术和位运算符都有简短的“修改并赋值”运算符：/= 和 -= 等。

算术复合赋值

~~算术复合赋值~~：将算术运算与赋值结合，简化表达式

运算符	示例	等价于	说明
`+=`	`x += 5`	`x = x + 5`	加法赋值
`-=`	`x -= 3`	`x = x - 3`	减法赋值
`*=`	`x *= 2`	`x = x * 2`	乘法赋值
`/=`	`x /= 4`	`x = x / 4`	除法赋值
`%=`	`x %= 3`	`x = x % 3`	取模赋值
`**=`	`x **= 2`	`x = x ** 2`	指数赋值 (ES2016)

示例：特殊行为

// 字符串操作
let str = "Hello";
str += " World!"; // "Hello World!"

// 类型转换
let num = "5";
num *= 2; // 10 (自动转数字)

// 浮点数问题
let price = 19.99;
price *= 100; // 1998.9999999999998 (精度问题)

位运算复合赋值@

~~位运算复合赋值~~：用于底层二进制操作。

运算符	示例	等价于	说明
`&=`	`x &= 5`	`x = x & 5`	按位与赋值
`\|=`	`x \|= 3`	`x = x \| 3`	按位或赋值
`^=`	`x ^= 1`	`x = x ^ 1`	按位异或赋值
`<<=`	`x <<= 2`	`x = x << 2`	左移赋值
`>>=`	`x >>= 1`	`x = x >> 1`	带符号右移赋值
`>>>=`	`x >>>= 1`	`x = x >>> 1`	无符号右移赋值

示例：应用场景

// 权限系统
let permissions = 0;
const READ = 1;
const WRITE = 2;

// 添加写权限
permissions |= WRITE;

// 检查读权限
const canRead = (permissions & READ) === READ;

逻辑复合赋值

~~逻辑复合赋值~~：针对逻辑运算的增强赋值。

运算符	示例	等价于	说明
`&&=`	`x &&= y`	`x = x && y`	逻辑与赋值
`\|\|=`	`x \|\|= y`	`x = x \|\| y`	逻辑或赋值
`??=`	`x ??= y`	`x = x ?? y`	逻辑空赋值 (ES2021)

示例：特殊行为

// ||= 和 ??= 的区别
let count = 0;

count ||= 10; // 0 是 false → count=10
count ??= 20; // 0 不是 null/undefined → 保持0

// 实际应用：配置默认值
const config = {};
config.timeout ??= 5000; // undefined：仅当未定义时设置

解构赋值@

~~解构赋值（Destructuring Assignment）~~：ES2015，从数组或对象中提取数据，并直接赋值给变量。它分为数组解构和对象解构。

核心特性：

解包：从数组或对象中提取值。
赋值：将提取的值赋给相应的变量。
模式匹配：根据特定模式匹配数据结构。

数组解构

~~数组解构（Array Destructuring）~~：ES2015，从数组中提取值，并将这些值直接赋给变量。

语法：

const colors = ['red', 'green', 'blue'];

// 基础解构
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // 'red'
console.log(secondColor); // 'green'
console.log(thirdColor);  // 'blue'

核心特性：

跳过不需要的元素

const numbers = [1, 2, 3, 4, 5];

// 跳过不需要的元素
const [first, , third, , fifth] = numbers;

console.log(first);  // 1
console.log(third); // 3
console.log(fifth); // 5

设置默认值：当解构的值可能为 undefined 时，可以设置默认值

const fruits = ['apple', 'banana'];

// 设置默认值
const [fruit1, fruit2, fruit3 = 'orange'] = fruits;

console.log(fruit1); // 'apple'
console.log(fruit2); // 'banana'
console.log(fruit3); // 'orange' (使用默认值)

剩余参数：使用剩余参数 (...) 捕获数组剩余部分

const letters = ['a', 'b', 'c', 'd', 'e'];

// 获取剩余元素
const [first, second, ...rest] = letters;

console.log(first); // 'a'
console.log(second); // 'b'
console.log(rest);  // ['c', 'd', 'e']

对象解构

~~对象解构~~：ES2015，从对象中提取值，并将这些值直接赋给变量。

语法：

const user = {
  id: 1,
  username: 'js_dev',
  email: 'dev@example.com'
};

// 解构基本属性
const { username, email } = user;

console.log(username); // 'js_dev'
console.log(email);   // 'dev@example.com'

核心特性：

重命名变量

const book = {
  title: 'JavaScript: The Good Parts',
  author: 'Douglas Crockford'
};

// 重命名解构出的变量
const { title: bookTitle, author: bookAuthor } = book;

console.log(bookTitle);  // 'JavaScript: The Good Parts'
console.log(bookAuthor); // 'Douglas Crockford'

设置默认值：当属性不存在时使用默认值

const settings = {
  theme: 'dark',
  fontSize: 16
};

// 设置默认值（当属性不存在时使用）
const { theme, fontSize, notifications = true } = settings;

console.log(notifications); // true（使用默认值）

嵌套解构

const employee = {
  id: 101,
  name: 'Alice',
  department: {
    name: 'Engineering',
    location: 'Building A'
  }
};

// 嵌套解构
const { 
  name, 
  department: { 
    location 
  } 
} = employee;

结合重命名和默认值

const product = {
  name: 'Laptop',
  price: 999
};

// 组合使用重命名和默认值
const { 
  name: productName, 
  category = 'Electronics', 
  stock: availableStock = 0 
} = product;

剩余参数

const student = {
  name: 'Bob',
  age: 20,
  major: 'Computer Science',
  gpa: 3.8
};

// 获取剩余属性
const { name, ...academicInfo } = student;

console.log(name); // 'Bob'
console.log(academicInfo); // { age: 20, major: 'Computer Science', gpa: 3.8 }

动态属性名解构

const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

const property = 'apiUrl';
const { [property]: apiEndpoint } = config;

console.log(apiEndpoint); // 'https://api.example.com'

不修改原始对象

const original = { a: 1, b: 2 };

// 解构不会修改原始对象
const { a } = original;
console.log(original); // { a: 1, b: 2 } (未改变)

比较运算符

我们知道，在数学中有很多用于比较大小的运算符，在JavaScript中也有相似的比较：

大于 / 小于：a > b，a < b。
大于等于 / 小于等于：a >= b，a <= b。
检查两个值的相等：a == b，请注意双等号 == 表示相等性检查，而单等号 a = b 表示赋值。
检查两个值不相等：不相等在数学中的符号是 ≠，但在 JavaScript 中写成 a != b。

比较运算符的结果都是Boolean类型的

对比=== 和 ==

普通的相等性检查 == 存在一个问题，它不能区分出 0 和 false，或者空字符串和 false这类运算：

这是因为在比较不同类型的值时，处于判断符号 == 两侧的值会先被转化为数字；
空字符串和 false 也是如此，转化后它们都为数字 0；

如果我们需要区分 0 和 false，该怎么办？

严格相等运算符 === 在进行比较时不会做任何的类型转换；
换句话说，如果 a 和 b 属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false；

同样的，“不相等”符号 != 类似，“严格不相等”表示为 !==。

严格相等的运算符虽然写起来稍微长一些，但是它能够很清楚地显示代码意图，降低你犯错的可能性。

运算符优先级

运算符放到一起使用时会有一定的优先级：

在MDN上给出了所有运算符的优先级（不用去记）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

分支语句

概述

程序执行顺序

在程序开发中，程序有三种不同的执行方式：

顺序：从上向下，顺序执行代码。
分支：根据条件判断，决定执行代码的分支。
循环：让特定代码 重复执行。

代码块

代码块：是多行执行代码的集合，通过一个花括号{}放到了一起。

在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中。

在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块：

通常会通过一些关键字来告知JS引擎代码要如何被执行；
比如分支语句、循环语句对应的关键字等；

生活中的条件判断

现实生活中有很多情况, 我们要根据条件来做一些决定:

小明妈妈说: 如果小明考试了100分, 就去游乐场（判断分数等于100分）
网吧禁止未成年人入内（判断年龄大于等于18岁，是否带身份证，是否带钱）
开发中，登录成功：账号和密码正确或扫描二维码成功

分支结构

程序是生活的一种抽象, 只是我们用代码表示了出来

在开发中, 我们经常需要根据一定的条件, 来决定代码的执行方向
如果条件满足，才能做某件事情
如果条件不满足，就做另外一件事情

~~分支结构~~：

分支结构的代码就是让我们根据条件来决定代码的执行
分支结构的语句被称为判断结构或者选择结构.
几乎所有的编程语言都有分支结构（C、C++、OC、JavaScript等等）

~~JS中常见的分支结构~~：

if分支结构
switch分支结构

if...else

if分支结构有三种：

单分支结构

if..

多分支结构

if..else..
if..else if..else..

if

单分支语句：if

if(...) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块。

案例一: 如果小明考试超过90分, 就去游乐场

“如果”相当于JavaScript中的关键字if
分数超过90分是一个条件(可以使用 > 符号)

案例二：单位5元/斤的苹果，如果购买超过5斤，那么立减8元

注意：这里我们让用户输入购买的重量，计算出最后的价格并且弹出结果

if语句的细节补充

补充一：如果代码块中只有一行代码，那么{}可以省略：

补充二：if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型（Boolean）。

转换规则和Boolean函数的规则一致；
数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。 ✓ 因为它们被称为“假值（falsy）”；
其他值被转换为 true，所以它们被称为“真值（truthy）”；

if...else

多分支语句一： if.. else..

if 语句有时会包含一个可选的 “else” 块。
如果判断条件不成立，就会执行它内部的代码。

案例一：如果分数超过90分去游乐场，否则去上补习班

满足条件时，做某些事情
不满足（else），去做另外一些事情

案例二：m=20，n=30，比较两个数字的大小，获取较大的那个数字

if...else if...else

多分支结构： if.. else if.. else..

有时我们需要判断多个条件；
我们可以通过使用 else if 子句实现；

案例: 分数评级：

考试分数大于90：优秀
大于80小于等于90：良好
大于60小于等于80：合格
小于60分：不及格

三元运算符

有时我们需要根据一个条件去赋值一个变量。

比如比较数字大小的时候，获取较大的数字；
这个时候if else语句就会显得过于臃肿，有没有更加简介的方法呢？

条件运算符：’?’

这个运算符通过问号 ? 表示；
有时它被称为三元运算符，被称为“三元”是因为该运算符中有三个操作数（运算元）；
实际上它是 JavaScript 中唯一一个有这么多操作数的运算符；

使用格式如下:

var result = condition ? value1 : value2;

计算条件结果，如果结果为真，则返回 value1，否则返回 value2。

案例一： m=20，n=30，比较两个数字的大小，获取较大的那个数字

案例二：判断一个人是否是成年人了

认识逻辑运算符

逻辑运算符，主要是由三个：

||（或），&&（与），!（非）
它可以将多个表达式或者值放到一起来获取到一个最终的结果；

有了逻辑运算符，我们就可以在判断语句中编写多个条件。

逻辑或的本质

||（或）两个竖线符号表示“或”运算符（也称为短路或）：

从左到右依次计算操作数。
处理每一个操作数时，都将其转化为布尔值（Boolean）；
如果结果是 true，就停止计算，返回这个操作数的初始值。
如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数。

注意：返回的值是操作数的初始形式，不会转换为Boolean类型。

换句话说，一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值。

逻辑与的本质

&&（或）两个竖线符号表示“与”运算符（也称为短路与）：

从左到右依次计算操作数。
在处理每一个操作数时，都将其转化为布尔值（Boolean）；
如果结果是 false，就停止计算，并返回这个操作数的初始值（一般不需要获取到初始值）；
如果所有的操作数都被计算过（例如都是真值），则返回最后一个操作数。

换句话说，与运算返回第一个假值，如果没有假值就返回最后一个值。

!（非）

逻辑非运算符接受一个参数，并按如下运算：

步骤一：将操作数转化为布尔类型：true/false；
步骤二：返回相反的值；

两个非运算 !! 有时候用来将某个值转化为布尔类型：

也就是，第一个非运算将该值转化为布尔类型并取反，第二个非运算再次取反。
最后我们就得到了一个任意值到布尔值的转化。

switch

switch是分支结构的一种语句：

它是通过判断表达式的结果（或者变量）是否等于case语句的常量，来执行相应的分支体的；

与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断；

switch的语法：

switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

switch语句的补充

case穿透问题：

一条case语句结束后，会自动执行下一个case的语句；
这种现象被称之为case穿透；

break关键字

通过在每个case的代码块后添加break关键字来解决这个问题；

注意事项：这里的相等是严格相等。

被比较的值必须是相同的类型才能进行匹配。

案例练习：播放模式（单曲循环、循环播放、随机播放）

循环语句

认识循环

在开发中我们经常需要做各种各样的循环操作：

比如把一个列表中的商品、歌曲、视频依次输出进行展示；
比如对一个列表进行累加计算；
比如运行相同的代码将数字 1 到 10 逐个输出；

循环是一种重复运行同一代码的方法。

如果是对某一个列表进行循环操作，我们通常也会称之为遍历（traversal）或者迭代（iteration）；

在JavaScript中支持三种循环方式：

while循环；
do..while循环；
for循环；

while循环

while循环的语法如下：

当条件成立时，执行代码块；
当条件不成立时，跳出代码块；

如果条件一直成立（为true），那么会产生死循环。

这个时候必须通过关闭页面来停止死循环；
开发中一定要避免死循环的产生；

while循环的练习

while循环的练习题目：

练习一：打印10次Hello World
练习二：打印0~99的数字
练习三：计算0~99的数字和
练习四：计算0~99所有奇数的和
练习五：计算0~99所有偶数的和

do..while循环

do..while循环和while循环非常像，二者经常可以相互替代(不常用)

但是do..while的特点是不管条件成不成立，do循环体都会先执行一次；

通常我们更倾向于使用while循环。

for循环

for 循环更加复杂，但它是最常使用的循环形式。

begin 执行一次，然后进行迭代：每次检查 condition 后，执行 body 和 step

for循环的练习

利用for循环实现之前的案例：

练习一：打印10次Hello World
练习二：打印0~99的数字
练习三：计算0~99的数字和
练习四：计算0~99所有奇数的和
练习五：计算0~99所有偶数的和

for循环的嵌套

什么是循环的嵌套呢？（日常开发使用不算多，在一些算法中比较常见）

在开发中，某些情况下一次循环是无法达到目的的，我们需要循环中嵌套循环；

我们通过for循环的嵌套来完成一些案例：

案例一：在屏幕上显示包含很多❤的矩形
案例二：在屏幕上显示一个三角的❤图像
案例三：在屏幕上显示一个九九乘法表

循环控制

循环的跳转（控制）：

在执行循环过程中, 遇到某一个条件时, 我们可能想要做一些事情；
比如循环体不再执行(即使没有执行完), 跳出循环；
比如本次循环体不再执行, 执行下一次的循环体；

循环的跳转控制

break: 直接跳出循环, 循环结束

break 某一条件满足时，退出循环，不再执行后续重复的代码

continue: 跳过本次循环次, 执行下一次循环体

continue 指令是 break 的“轻量版”。
continue 某一条件满足时，不执行后续重复的代码

猜数字游戏

猜数字游戏规则：

电脑随机生成一个0~99之间的数字；
玩家有7次猜测的机会；
玩家猜测一个数字, 输入到程序中；
电脑根据输入的数字打印: 猜大了/猜小了/猜对了的情况；
猜对了, 那么游戏结束，显示恭喜您；
7次机会用完打印: 您的次数用完了, 您失败了；

循环的总结

我们学习了三种循环：

while —— 每次迭代之前都要检查条件；
do..while —— 每次迭代后都要检查条件；
for (;😉 —— 每次迭代之前都要检查条件，可以使用其他设置；

break/continue 可以对循环进行控制。

S03-01 JS-基础-基础语法 ​

概述 ​

前端三大核心 ​

计算机语言 ​

编程语言 ​

概述 ​

编程语言历史 ​

机器语言和高级语言 ​

JavaScript ​

概述 ​

JS历史 ​

JS组成 ​

JS应用 ​

基础 ​

编写方式 ​

<noscript> ​

交互方式 ​

Chrome调试 ​

Console ​

语句和分号 ​

注释 ​

VSCode插件 ​

变量 ​

概述 ​

语法格式 ​

命名规范 ​

练习 ​

使用注意 ​

数据类型 ​

JS的数据类型 ​

Number ​

String ​

转义字符 ​

属性和方法 ​

Boolean ​

Undefined ​

Null ​

Object ​

相关操作 ​

typeof ​

数据类型转换 ​

String转换 ​

Number转换 ​

Boolean转换 ​

运算符 ​

概述 ​

运算符 ​

运算元 ​

算术运算符 ​

取余 % ​

幂 ** ​

自增/自减 ​

赋值运算符 ​

基础赋值 ​

基础赋值 ​

链式赋值 ​

算术复合赋值 ​

原地修改 ​

算术复合赋值 ​

位运算复合赋值@ ​

逻辑复合赋值 ​

解构赋值@ ​

数组解构 ​

对象解构 ​

比较运算符 ​

对比=== 和 == ​

运算符优先级 ​

分支语句 ​

概述 ​

程序执行顺序 ​

代码块 ​

生活中的条件判断 ​

分支结构 ​

if...else ​

if ​

if语句的细节补充 ​

if...else ​

if...else if...else ​

三元运算符 ​

认识逻辑运算符 ​

S03-01 JS-基础-基础语法

概述

前端三大核心

计算机语言

编程语言

概述

编程语言历史

机器语言和高级语言

JavaScript

概述

JS历史

JS组成

JS应用

基础

编写方式

<noscript>

交互方式

Chrome调试

Console

语句和分号

注释

VSCode插件

变量

概述

语法格式

命名规范

练习

使用注意

数据类型

JS的数据类型

Number

String

转义字符

属性和方法

Boolean

Undefined

Null

Object

相关操作

typeof

数据类型转换

String转换

Number转换

Boolean转换

运算符

概述

运算符

运算元

算术运算符

取余 %

幂 **

自增/自减

赋值运算符

基础赋值

基础赋值

链式赋值

算术复合赋值

原地修改

算术复合赋值

位运算复合赋值@

逻辑复合赋值

解构赋值@

数组解构

对象解构

比较运算符

对比=== 和 ==

运算符优先级

分支语句

概述

程序执行顺序

代码块

生活中的条件判断

分支结构

if...else

if

if语句的细节补充

if...else

if...else if...else

三元运算符

认识逻辑运算符